<template>
  <!-- 此模块没有进行表单校验 -->
  <el-form ref="form" :model="userOther" label-width="80px">
    <el-form-item
      label="教育历程"
      :rules="{
      required: true, message: '教育历程不能为空', trigger: 'blur'
    }"
    >
      <el-table
        :data="userOther.educationExperience.data"
        style="width: 100%"
        highlight-current-row
      >
        <!-- 列-->
        <el-table-column
          v-for="(headDataItem, index) in userOther.educationExperience.headData"
          :key="index"
          :label="headDataItem.titleName"
          align="center"
          width="380">
          <!-- 占位插槽 ----- 自定义列的显示内容
          Vue3 中使用 #default="scope" 取代了 Vue2 的 slot-scope="scope"
          通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
          row 是 scope 的内置属性，应该还会有column, $index 等内置属性
          scope 并不是代表着 table，可以将scope.row理解为一个整体
          scope相当于一行的数据， scope.row相当于当前行的数据对象
          -->
          <template #default="scope">
            <!-- 第一列 时间-->
            <el-date-picker
              v-if="headDataItem.picker"
              v-model="scope.row.time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <!-- 第二列 地点
            el-popover 的 :value="visible"属性已无法修改显示与隐藏
            -->
            <el-popover
              trigger="click"
              placement="top"
              v-if="headDataItem.popover"
              width="400"
              v-model:visible="scope.row.visible">
              <!-- 地点 展示状态-->
              <div v-if="!scope.row.isEdit">
                <p>详细地点: {{ scope.row.address }}</p>
                <p>补充说明: {{ scope.row.others }}</p>
              </div>
              <!-- 地点 编辑状态
              Vue3 将 slot=""用法改为了 #
              -->
              <div v-if="scope.row.isEdit">
                <el-input placeholder="请输入内容" v-model="scope.row.address"  clearable>
                  <template #prepend>详细地点</template>
                </el-input>
                <el-input placeholder="请输入内容" v-model="scope.row.others"  clearable style="margin-top: 5px">
                  <template #prepend>补充说明</template>
                </el-input>
                <div style="text-align: right; margin-top: 5px">
                  <el-button type="info" @click="show(scope.row)">取消</el-button>
                  <el-button type="primary" @click="scope.row.isEdit = false">确定</el-button>
                </div>
              </div>
              <!-- popover 默认展示的部分
              通常我们使用 #reference 来放置我们的触发元素
              v-popover 将被废弃，请使用 virtual-ref 作为替代
              -->
              <template #reference>
                <div>
                  <!-- 标签元素-->
                  <el-tag v-if="!scope.row.isEdit">{{ scope.row.add }}</el-tag>
                  <el-col :span="12" :offset="6" v-if="scope.row.isEdit">
                    <el-input placeholder="请输入内容" v-model="scope.row.add" clearable ></el-input>
                  </el-col>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="260px" align="center">
          <template #default="scope">
            <el-button
              type="warning"
              @click="handleEditRowEdu(scope.$index, scope.row)"
            >{{scope.row.isEdit ? "确定" : "编辑"}}</el-button>
            <el-button
              type="danger"
              @click.native.prevent="handleDeleteRowEdu(scope.$index, userOther.educationExperience.data)"
            >删除</el-button>
            <el-button
              v-if="scope.$index === userOther.educationExperience.data.length - 1"
              type="success"
              @click="handleAddRowEdu"
            >新增</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <user-other-info-item
        label="项目经历"
        :projectExperience="userOther.projectExperience"
        :rules="{
      required: true, message: '项目经历不能为空', trigger: 'blur'
    }"
    />
    <el-form-item label="开发技术">
      <el-divider content-position="left">开发工具</el-divider>
      <el-input
          type="textarea"
          autosize
          placeholder="请输入你所熟悉的开发工具"
          v-model="userOther.dev.devTools">
      </el-input>
      <el-divider content-position="left">数据库</el-divider>
      <el-input
          type="textarea"
          autosize
          placeholder="请输入你所熟悉的数据库"
          v-model="userOther.dev.database">
      </el-input>
      <el-divider content-position="left">开发语言</el-divider>
      <el-input
          type="textarea"
          autosize
          placeholder="请输入你所熟悉的开发语言"
          v-model="userOther.dev.languages">
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {reactive} from "vue";
import {updateUserOtherProfile} from "@/api/system/user";
import UserOtherInfoItem from "@/views/system/user/profile/userOtherInfoItem.vue";

// 父组件传过来的数据
const props = defineProps({
  userOther: {
    type: Object
  }
})
// proxy 代替了 this
const { proxy } = getCurrentInstance();

//时间范围选择
const pickerOptions = reactive({
  shortcuts: [{
    text: '最近一周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit('pick', [start, end]);
    }
  },
    {
    text: '最近一个月',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      picker.$emit('pick', [start, end]);
    }
  },
    {
    text: '最近三个月',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      picker.$emit('pick', [start, end]);
    }
  }]
})

function submit() {
  // 接口请求需要修改一下
  updateUserOtherProfile(props.userOther).then(response => {
    proxy.$modal.msgSuccess("修改成功");
  });
}

function close() {
  proxy.$tab.closePage();
}

// 教育经历数组新增一个数据
function handleAddRowEdu() {
  props.userOther.educationExperience.data.push({
    add: '待编辑',
    address: '无',
    others:'无',
    time: '',
    isEdit: false,
    visible: false
  });
}

// 当前行教育经历数据 row提供了当前行对应数据的set方法进行响应式修改数据
function handleEditRowEdu(index, row) {
  // this.$set(row, "isEdit", true);
  //console.log(row)
  row.isEdit = !row.isEdit
  //console.log(row)
}

// 删除当前行 并且将当前行对应的数据也删除(数组元素的删除)
function handleDeleteRowEdu(index, educationData) {
  educationData.splice(index, 1);
}

// el popover 的显示与隐藏
function show(row){
  row.visible = !row.visible
  row.isEdit = !row.isEdit
}

</script>
<style>

</style>
